@import 'docs/src/breakpoints.css';

@layer base {
  html {
    color-scheme: light dark;
  }

  body {
    position: relative; /* iOS 26 `position: absolute` backdrops */
    min-width: 320px;
    line-height: 1.5;
    /* It's also the iOS footer overscroll background */
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  ::selection {
    background-color: var(--color-selection);
  }
}

@layer components {
  .RootLayout {
    z-index: 0;
    position: relative;

    --root-layout-padding-x: 0rem;
    padding-inline: var(--root-layout-padding-x);

    @media (--show-side-nav) {
      --root-layout-padding-x: 3rem;

      &::before,
      &::after {
        content: '';
        position: absolute;
        background-color: var(--color-gridline);
        height: 1px;
        right: 0;
        left: 0;
      }

      &::before {
        top: var(--header-height);
        margin-top: -1px;
      }

      &::after {
        bottom: var(--header-height);
        margin-bottom: -1px;
      }
    }
  }

  .RootLayoutContainer {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-inline: auto;
    min-height: 100dvh;
    max-width: calc(var(--breakpoint-max-layout-width) - var(--root-layout-padding-x) * 2);

    @media (--show-side-nav) {
      padding-block: var(--header-height);
      padding-bottom: 0;

      &::before,
      &::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 1px;
        background-color: var(--color-gridline);
      }

      &::before {
        left: 0;
        margin-left: -1px;
      }

      &::after {
        right: 0;
        margin-right: -1px;
      }
    }
  }

  .RootLayoutContent {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    background-color: var(--color-content);
  }

  .RootLayoutFooter {
    @media (--lg) {
      background-color: var(--color-background);
      width: 100%;
      height: var(--header-height);
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }
}
